<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录失败</title>
	<link rel="shortcut icon" href="./ego.ico" type="image/x-icon">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f0f2f6;
			font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC',
				'Hiragino Sans GB', 'Microsoft YaHei', 'STHeiti', 'SimHei', sans-serif;
		}

		body * {
			box-sizing: border-box;
		}

		header {
			height: 65px;
			background-color: #fff;
		}

		header .logo {
			margin-left: 40px;
			display: flex;
			align-items: center;
			width: 146px;
			height: 100%;
			line-height: 65px;
		}

		header .logo img {
			height: 30px;
		}

		main {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 460px;
			height: 546px;
			background: #FFFFFF;
			box-shadow: 0px 8px 20px rgba(86, 130, 255, 0.08);
			border-radius: 8px;
			padding: 40px 60px;
			box-sizing: border-box;
		}

		main #login-failed {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-bottom: 1px solid #E8EAED;
			margin-bottom: 12px;
		}

		main #login-failed img {
			width: 160px;
			height: 160px;
			margin-bottom: 20px;
		}

		main #login-failed .title {
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			font-size: 24px;
			line-height: 32px;
			text-align: center;
			color: #303142;
			margin: 0;
			margin-bottom: 12px;
		}

		main #login-failed .btn {
			width: 82px;
			height: 30px;
			border: 1px solid #DEE0E3;
			border-radius: 4px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 100%;
			color: #8F959E;
			cursor: pointer;
			user-select: none;
			margin-bottom: 20px;
		}

		main #login-failed .btn a {
			display: inline-block;
			box-sizing: border-box;
			padding: 8px 12px;
			width: 100%;
			height: 100%;
			text-decoration: none;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 100%;
			color: #8F959E;
		}

		main #login-failed .btn:hover a {
			color: #658BFC;
		}

		main #login-failed .btn:active a {
			color: #466FEB;
		}

		main #login-failed .btn:hover {
			border-color: #658BFC;
		}

		main #login-failed .btn:active {
			border-color: #658BFC;
		}


		main #login-failed-reason {
			display: flex;
			align-items: flex-start;
			width: 100%;
		}

		main #login-failed-reason p {
			margin: 0;
			text-indent: -1.5em;
		}

		main #login-failed-reason ul {
			padding-left: 1.5em;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 12px;
			line-height: 20px;
			color: #646A73;
			margin: 0;
		}

		main #login-failed-reason ul :nth-child(3) {
			margin-bottom: 1.5em;
		}

		main #login-failed-reason ul :nth-child(3)>span {
			position: relative;
			z-index: 999;
			color: #658BFC;
			cursor: pointer;
			border-bottom: 1px solid #658BFC;
			padding-bottom: -10px;
		}

		main #login-failed-reason ul :nth-child(3)>span:hover {
			color: #466FEB;
			border-bottom: 1px solid #466FEB;
		}

		main #login-failed-reason ul :nth-child(4)>ul {
			list-style: disc
		}

		.erweima {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 94px;
			left: 23.5px;
			width: 240px;
			height: 308px;
			background: #4C78FC;
			border-radius: 8px;
			padding: 24px 16px;
			box-sizing: border-box;
			visibility: hidden;
			opacity: 0;
			transition: all .3s linear;
		}

		.new-style {
			visibility: visible;
			opacity: 1;
		}

		.erweima::after {
			content: '';
			position: absolute;
			bottom: -22px;
			border-top: 12px solid #4C78FC;
			border-bottom: 12px solid transparent;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
		}

		.erweima p {
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 12px;
			line-height: 20px;
			text-align: center;
			color: #FFFFFF;
			margin: 0;
			margin-bottom: 12px;
		}

		.erweima img {
			width: 208px;
			height: 208px;
		}
	</style>
</head>

<body>
	<header>
		<div class="logo">
			<img src="./images/logo.svg" />
		</div>
	</header>
	<main>
		<section id="login-failed">
			<img src="./images/net_failed.png" />
			<h2 class="title">登录失败</h2>
			<div class="btn"><a id="return" href="javascript:void(0);" onclick="linkTo()">返回重试</a></div>
		</section>
		<section id="login-failed-reason">
			<ul>
				<p>登录失败可能的原因：</p>
				<li>您的钉钉账号未被同步进平台系统，请联系贵组织的钉钉管理员同步通讯录；</li>
				<li>您的组织未开通平台系统，若您是钉钉管理员，请通过钉钉APP<span id="qr_code">扫描二维码</span>开通平台应用；</li>
				<li>
					你也可以联系我们获取帮助
					<ul>
						<li>服务热线：400-1818-187</li>
						<li>客服邮箱：service@byteluck.com</li>
					</ul>
				</li>
			</ul>
		</section>
		<div class="erweima">
			<p>您可以使用钉钉APP扫描下方二维码 安装平台应用</p>
			<img src="./images/erweima.png" />
		</div>
	</main>
	<script>
		function linkTo(){
			location.href = location.origin
		}
		const text = document.getElementById('qr_code')
		const erweima = document.querySelector('.erweima')
		text.addEventListener('mouseover', () => {
			erweima.className = 'erweima new-style'
		}) 
		text.addEventListener('mouseout', () => {
			erweima.className = 'erweima'
		})
	</script>
</body>

</html>